<template>
    <div>
        <headers />

        <div class="container">
            <main-nav />

            <el-card>
                <div slot="header">
                    <div class="flex align-items" v-if="merchantInfo">
                        <img src="../../assets/img/2.png" width="40px" height="40px" />
                        <h3 class="ml-15">{{ merchantInfo?.merchantInfo?.merchant_name }}</h3>
                        <span class="ml-30">销售电话：{{ merchantInfo.pre_sale }}</span>
                        <span class="ml-30">售后电话：{{ merchantInfo.after_sale }}</span>
                    </div>
                </div>

                <div>
                    <el-carousel>
                        <el-carousel-item v-for="(img, index) in merchantInfo.images" :key="index">
                            <el-image :src="img" lazy fit="contain" class="w-100"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <el-row class="mt-20">
                    <el-button v-for="category in categorys" :key="category.id"
                        :type="category.id === activeIndex ? 'danger' : 'default'" @click="handleChange(category.id)">{{
                        category.name }}
                    </el-button>
                </el-row>

                <div v-show="activeIndex === 1">
                    <zbModule/>
                </div>

                <div v-show="activeIndex === 2">
                    <intor title="供应商介绍" :data="merchantInfo" />
                </div>

                <div v-show="activeIndex === 3 && merchantInfo">
                    <zbShowModule title="装备展示" />
                </div>

                <div v-show="activeIndex === 4">
                    <sceneplanModule />
                </div>
            </el-card>
        </div>
        <footers />
    </div>
</template>

<script>
import headers from "@/components/header.vue"
import footers from "@/components/footer.vue"
import mainNav from "@/components/mainNav.vue"
import zbModule from './components/zbModule.vue'
import zbShowModule from './components/zbShowModule.vue'
import sceneplanModule from './components/sceneplanModule.vue'
import intor from './components/intor.vue'

import { getMerchantInfo } from "@/api/apis"

export default {
    name: "supplier",
    components: {
        headers,
        footers,
        mainNav,
        zbModule,
        zbShowModule,
        sceneplanModule,
        intor
    },
    data () {
        return {
            loading: true,
            supplierId: '',
            activeIndex: 4,
            categorys: [
                {
                    id: 1,
                    name: '供应商装备'
                },
                {
                    id: 2,
                    name: '供应商介绍'
                },
                {
                    id: 3,
                    name: '装备展示'
                },
                {
                    id: 4,
                    name: '场景方案'
                }
            ],
            treeData: [{
                label: '一级 1',
                children: [{
                    label: '二级 1-1',
                    children: [{
                        label: '三级 1-1-1'
                    }]
                }]
            }, {
                label: '一级 2',
                children: [{
                    label: '二级 2-1',
                    children: [{
                        label: '三级 2-1-1'
                    }]
                }, {
                    label: '二级 2-2',
                    children: [{
                        label: '三级 2-2-1'
                    }]
                }]
            }, {
                label: '一级 3',
                children: [{
                    label: '二级 3-1',
                    children: [{
                        label: '三级 3-1-1'
                    }]
                }, {
                    label: '二级 3-2',
                    children: [{
                        label: '三级 3-2-1'
                    }]
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            videoList: [],

            zbList: [],
            merchantInfo: {}, // 商家信息

            isEmpty: false,
            total: 0, // 总条数
            params: {
                page: 1, // 当前页
                pagesize: 10, // 每页条数
                lastPage: 1, // 最后一页
            }
        }
    },
    mounted () {
        if (this.$route.query.type) {
            this.activeIndex = Number(this.$route.query.type)
        }
        if (this.$route.query.id) {
            this.supplierId = Number(this.$route.query.id)
        }
        if (this.supplierId){
            this.getMerchantInfoData();
        }
    },
    methods: {
        handleChange (index) {
            this.activeIndex = index;
            const type = this.$route.query.type;
            type != index && this.$router.push({ name: 'supplier', query: { ...this.$route.query, type: index } })
        },
        handleCurrentChange (val) {
            this.params.page = val
            this.getList()
        },
        // 获取商家信息
        getMerchantInfoData(){
            getMerchantInfo({ id: this.supplierId }).then(res => {
                if (res.code === 1) {
                    this.merchantInfo = res.data;
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.hd-title {
    text-align: center;
    margin-top: 60px;

    h3 {
        font-size: 28px;
        font-weight: 700;
        color: #2E3033;
    }

    p {
        font-size: 14px;
        color: rgba(46, 48, 51, .6);
        margin-top: 10px;
    }
}

/deep/.el-input__suffix {
    right: 0;
}

.orderBy {
    .el-button {
        border-color: transparent;

        &.el-button--danger:hover {
            color: #fff;
        }

        &:hover {
            color: #000;
            background-color: transparent;
        }
    }
}

.video-box {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 26px;
    margin-top: 30px;
}
</style>